<template>
    <div>
<bt></bt>
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>
<van-tabs v-model:active="active">
  <van-tab title="标签 1">
    <lbt></lbt>
    <img src="@/views/home/a.jpg" alt="" width="100%">
    <van-count-down :time="time">
  <template #default="timeData">
    限时购
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
    每天10点 限时限量
  </template>
</van-count-down>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
<div class="aa">
    <div>
        <p><h3>福利社</h3></p>
        <p>官方自营618全球购</p>
        <van-image
  width="180"
  height="180"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
</div>
<div class="aa">
    <div>
        <p><h3>大牌跨店满减</h3></p>
        <p>欧莱雅小黑瓶￥250起</p>
        <van-image
  width="170"
  height="180"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
</div>
    </div>
</template>

<script setup>
import bt from '@/components/bt.vue';
import lbt from '@/components/lbt.vue';
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
const time = ref(30 * 60 * 60 * 1000);
let catitemsApiData=ref([])
catitemsApi().then(res=>{
    catitemsApiData.value=res.data.message
    console.log(res);
    
})
</script>

<style scoped>
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #0d0d0d;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #040404;
  }
  .aa{
    width: 170px;
    float: left;
    margin: 5px;
  }
</style>